<template>
    <div class="index">
        <!-- 顶部logo-搜索 -->
        <div class="top">
            <div class="logo">
                <i class="iconfont big-wangyiyunyinle"></i>
                <span>网易云音乐</span>
            </div>
            <div class="search">
                <span @click="routerGo()" class="iconfont big-direction-left"></span>
                <span class="iconfont big-direction-right"></span>
                <div class="searchInp">
                    <i class="iconfont big-sousuo1"></i>
                    <el-input v-model="searchModel"></el-input>
                </div>
            </div>
            <div class="info">
                <img :src="profile.avatarUrl" alt="">
                <span>{{profile.nickname}}</span>
                <span class="outLogin" @click="outLoginClick()">
                    <i class="iconfont big-tuichufffpx"></i>
                    <span>退出登录</span>
                </span>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="main">
            <div class="menu">
                <!-- 发现音乐 -->
                <div class="menuFX">
                    <ul>
                        <li 
                        :class="[menuLiClickFlag==item.value? 'liActive':'',MouseFlag==item.value? 'liMouse':'']" 
                        @click="menuLiClick(item)" 
                        @mouseenter="menuLiMouseenter(item)"
                        @mouseleave="menuLiMouseleave(item)"
                        v-for="(item,index) in menuLiFor" 
                        :key="'menuLiFor'+index">{{item.name}}</li>
                    </ul>
                </div>
                <div class="myMusic">我的音乐</div>
                <!-- 本地音乐 -->
                <div class="myMusicUl">
                    <ul>
                        <li 
                        :class="[menuLiClickFlag==item.value? 'myMusicUlLiActive':'',MouseFlag==item.value? 'liMouse':'']" @click="menuLiClick(item)" 
                        @mouseenter="menuLiMouseenter(item)"
                        @mouseleave="menuLiMouseleave(item)"
                        v-for="(item,index) in myMusicFor" :key="index">
                            <i :class="item.icon"></i>
                            <span>{{item.name}}</span>
                        </li>
                    </ul>
                </div>
                <!-- 创建-收藏的歌单 -->
                <div class="songSheet">
                    <el-menu>
                        <el-submenu index="1">
                            <template slot="title">
                                <span class="songSheetColor">创建的歌单</span>
                            </template>
                            <el-menu-item>xxx</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <span class="songSheetColor">收藏的歌单</span>
                            </template>
                            <el-menu-item>xxxx</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
            <!-- 主体 -->
            <div class="content">
                <router-view />
            </div>
        </div>
        <!-- 底部播放控制台 -->
        <div class="bottom" v-show="this.$refs.PlayConsole?this.$refs.PlayConsole.songItemFlag:''">
            <PlayConsole ref="PlayConsole" />
        </div>
    </div>
</template>

<script>
import PlayConsole from "../PlayConsole/PlayConsole";
export default {
    data(){
        return{
            searchModel:"",
            profile:{},
            menuLiFor:[
            {
                name:'发现音乐',
                value:'1'
            },
            {
                name:'视频',
                value:'2'
            },
            {
                name:'朋友',
                value:'3'
            },
            {
                name:'直播',
                value:'4'
            },
            {
                name:'私人FM',
                value:'5'
            },
            ],
            menuLiClickFlag:"1",
            MouseFlag:"",
            myMusicFor:[
                {
                    icon:'iconfont big-icon-',
                    name:'本地音乐',
                    value:'6',
                },
                {
                    icon:'iconfont big-anchuweidianiconquanji_fuzhi-',
                    name:'下载管理',
                    value:'7',
                },
                {
                    icon:'iconfont big-yunpan',
                    name:'我的音乐云盘',
                    value:'8',
                },
                {
                    icon:'iconfont big-wodeshoucang',
                    name:'我的收藏',
                    value:'9',
                }
            ],
        }
    },
    mounted(){
        this.profile = JSON.parse(localStorage.getItem('loginInfo')).profile;
        
        history.pushState(null, null, );
        window.addEventListener('popstate', function () {

            history.pushState(null, null, document.URL);

        });
    },
    components:{
        PlayConsole
    },
    methods:{
        // 退出登录
        outLoginClick(){
            this.$router.push('/Login');
        },
        // 侧边栏点击
        menuLiClick(item){
            this.menuLiClickFlag = item.value
            let routeObj = {
                '1':'/DiscoverMusic',
                '2':'/VideoCom',
                '3':'/FriendCom',
                '4':'/LiveBroadcast',
                '5':'/PrivateFM',
            }
            this.$router.push(routeObj[this.menuLiClickFlag])
        },
        // 鼠标进入
        menuLiMouseenter(item){
            this.MouseFlag = item.value;
        },
        // 鼠标移出
        menuLiMouseleave(item){
            this.MouseFlag = "";
        },
        // 返回上一级路由
        routerGo(){
            this.$router.go(-1)
        },
    }
}
</script>

<style lang="scss" scoped>
@import "./index.scss"
</style>